<template>
  <div class="vip">
    <div class="headBg">
      <div class="head">
        <div class="userHead">
          <img
            :src="userImg || 'https://static1-music.taihe.com/client/img/3713308.png'"
            alt=""
          />
        </div>
        <div class="userContorl">
          <div class="nickName">{{ nickname ? nickname : "未登录" }}</div>
          <div class="userRouter" v-if="nickname">
            <router-link to="/user">个人中心</router-link> |
            <span @click="outLogin">退出登录</span>
          </div>
        </div>
        <div class="payVip">
          <div class="title">开通会员,立享特权</div>
          <div class="payBtn">立即开通</div>
        </div>
      </div>
    </div>
    <div class="vipContainer">
      <div class="vipPVGTitle">-会员特权-</div>
      <div class="vipPVG">
        <div class="PVG1">
          <div class="iconfont icon-yinle"></div>
          <p>VIP曲库</p>
          <span>独享更多VIP专属曲库内容（不含数字专辑）</span>
        </div>
        <div class="PVG2">
          <div class="iconfont icon-yinlemusic214"></div>
          <p>无损音质</p>
          <span>为VIP会员提供SQ无损音质服务，听到细节</span>
        </div>
        <div class="PVG3">
          <div class="iconfont icon-VIP"></div>
          <p>身份特权</p>
          <span>VIP尊贵标识，优先享有新功能特权</span>
        </div>
      </div>
      <div class="vipPVGTitle">-会员歌单-</div>
      <div class="vipSongs">
        <div class="songsBox" v-for="songs in songsList" :key="songs.id">
          <div class="songsImg">
            <img :src="songs.coverImgUrl" alt="" />
            <i class="iconfont icon-bofang1"></i>
          </div>
          <div class="songsTel">{{ songs.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, onMounted } from "vue";
import { songsListModel } from "../../api/Vip/Vip";
export default defineComponent({
  name: "Vip",
});
</script>

<script lang="ts" setup>
import { loginStatus } from "../../store/moduls/Vip/vip";
import req from "../../utils/req";
const useloginStatus = loginStatus();
// 头像
const userImg = ref<string | undefined>(localStorage.getItem("avatarUrl") as string);
// 昵称
const nickname = ref<string | undefined>(useloginStatus.getNickName);
// 歌单信息
const songsList = ref<songsListModel>([]);
// 退出登录事件
const outLogin = () => {
  localStorage.clear();
  useloginStatus.outlogin();
  nickname.value = useloginStatus.getNickName;
};
watch(
  () => useloginStatus.getNickName,
  () => {
    if (useloginStatus.getNickName) {
      userImg.value = localStorage.getItem("avatarUrl") as string;
      nickname.value = useloginStatus.getNickName;
      return;
    }
    userImg.value = undefined;
    nickname.value = useloginStatus.getNickName;
  }
);
onMounted(async () => {
  const res = await req("/top/playlist/highquality", { limit: 20 }, "get");
  songsList.value = res.data.playlists;
});
</script>

<style lang="less" scoped>
.headBg {
  height: 300px;
  background-color: #333333;
  .head {
    width: 1200px;
    height: 250px;
    padding-top: 50px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    position: relative;
    .userHead {
      width: 120px;
      height: 120px;
      overflow: hidden;
      border-radius: 50%;
      display: flex;
      img {
        width: 120px;
        height: 120px;
      }
    }
    .userContorl {
      position: absolute;
      left: 160px;
      color: #fff;
      .nickName {
        font-size: 20px;
      }
      .userRouter {
        margin-top: 28px;
        font-size: 14px;
        a {
          color: #fff;
          text-decoration: none;
        }
        span {
          cursor: pointer;
        }
      }
    }
  }
  .payVip {
    width: 680px;
    height: 250px;
    background: url("../../assets/images/payVipBg.png") 50% no-repeat;
    .title {
      margin-left: 60px;
      margin-top: 65px;
      font-size: 36px;
    }
    .payBtn {
      width: 138px;
      height: 50px;
      border-radius: 50px;
      background-color: #333333;
      text-align: center;
      line-height: 50px;
      color: #fff;
      margin-left: 60px;
      margin-top: 26px;
    }
  }
}
.vipContainer {
  width: 1200px;
  margin: 80px auto;
  .vipPVGTitle {
    text-align: center;
    font-size: 28px;
    margin: 30px 0;
  }
  .vipPVG {
    display: flex;
    justify-content: space-between;
    .PVG1,
    .PVG2,
    .PVG3 {
      width: 390px;
      height: 256px;
      margin: 0 10px;
      background-color: #f8f8f8;
      text-align: center;
      div {
        font-size: 80px;
        color: #b39c78;
        margin-top: 50px;
      }
      p {
        font-size: 20px;
        margin-top: 20px;
      }
      span {
        color: #909399;
        font-size: 14px;
        line-height: 40px;
      }
    }
  }
}
.vipSongs {
  display: flex;
  flex-wrap: wrap;
  .songsBox {
    width: 220px;
    margin: 25px 10px;
    position: relative;
    .songsImg {
      width: 220px;
      height: 220px;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 224px;
        height: 224px;
        transition: all 1s;
      }
      &:hover {
        img {
          transform: scale(1.1);
        }
        i {
          display: block;
        }
      }
      i {
        font-size: 40px;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -100%);
        display: none;
      }
    }
  }
  .songsTel {
    margin-top: 20px;
  }
}
</style>
